<template>
  <!-- display: flex" 给父元素使用弹性布局
       效果:所有子元素横置,且父元素会根据子元素的实际高度自动填充高度 -->
  <div class="app-container">
    <header class="header">
      <div style="display: flex;">
        <el-menu
            mode="horizontal"
            background-color="#FF6A6A"
            text-color="#fff"
            active-text-color="#ff0"
            style="width: 100%;"
            unique-opened
            :collapse-transition="false"
            router
        >
          <el-menu-item index="/" style="margin-right: 800px">
            <img
                style="width: 50px"
                src="1.jpg"
            />
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon style="font-size: 21px"><User/></el-icon>
              <span>人员管理</span>
            </template>
            <el-menu-item index="/nannies">员工信息管理</el-menu-item>
            <el-menu-item index="/nannyTarget">员工等级审核</el-menu-item>
            <el-menu-item index="/nannyLeave">员工请假审批</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon style="font-size: 21px"><Van/></el-icon>
              <span>轮播图管理</span>
            </template>
            <el-menu-item index="/carousel">轮播图管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </header>
    <!--    <div class="full-width-image-container">-->
    <!--      <img src="" class="full-width-image">-->
    <!--    </div>-->
    <main class="main">
      <router-view/>
    </main>
    <footer class="footer">
      <p>版权所有 © 2023</p>
    </footer>
  </div>


</template>

<script setup>
import {ref} from "vue";

//获取当前登录的用户对象
const user = ref();

const logout = ()=>{
  if (confirm('您确定要退出登录吗?')){
    //退出登录时要清空用户与面包屑数据
    localStorage.removeItem("user");
    localStorage.removeItem("breadcrumb");
    //退出后要去到登录页
    window.location.href = '/login';
    //也需要把已经取出来的user对象清空
    user.value='';
  }
}

</script>
<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0; /* 页面背景颜色 */
}

/* 版心容器 */
.app-container {
  width: 90%; /* 版心的宽度 */
  max-width: 100%; /* 确保在小屏幕设备上不会溢出 */
  margin: 0 auto; /* 水平居中 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在宽度计算中 */
  background-color: #ffffff; /* 版心背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 页眉样式 */
.header {
  background-color: #f8f9fa; /* 浅灰色背景 */
  padding: 0;
  text-align: center;
  margin-bottom: 20px; /* 与主要内容区域的间距 */
}

/* 主要内容区域样式 */
.main {
  padding: 20px;
  text-align: left;
}

/* 页脚样式 */
.footer {
  background-color: #f8f9fa; /* 浅灰色背景 */
  padding: 10px;
  text-align: center;
  margin-top: 20px; /* 与主要内容区域的间距 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .app-container {
    width: 90%; /* 在较小屏幕上，版心宽度为屏幕宽度的 90% */
  }
}

@media (max-width: 768px) {
  .app-container {
    width: 100%; /* 在移动设备上，版心宽度为屏幕宽度的 100% */
  }
}

/* 全宽度图片容器 */
.full-width-image-container {
  position: absolute; /* 使 .full-width-image-container 成为绝对定位 */
  top: 100px; /* 距离顶部 100px */
  left: 0; /* 距离左侧 0px */
  right: 0; /* 距离右侧 0px */
  z-index: 10; /* 确保图片在其他内容之上 */
  width: 100vw; /* 视口宽度的100% */
  overflow: hidden; /* 防止图片超出容器 */
}

/* 全宽度图片样式 */
.full-width-image {
  width: 100%; /* 图片宽度为容器的100% */
  height: 300px; /* 保持图片比例 */
  object-fit: cover; /* 保持图片比例并裁剪 */
}
</style>
